<template>
    <div>
        <el-tag>
            <div style="display: flex;align-items: center">
                <img src="@/assets/tiku/time.png"/>&nbsp;
                <span>{{timeDown(timers)}}</span>
            </div>
        </el-tag>
    </div>
</template>

<script>
    import {toRefs,ref} from 'vue'
    export default {
        name: "index",
        props:{
            timer:{
                type:Number,
                default:0
            }
        },
        setup(props){
            let timers = ref(0)
            let timerInterval = null;
            timers.value = props.timer
            timerInterval = setInterval(() =>{
                timers.value --
            },1000)
            let timeDown = (totalTime) => {
                let h = parseInt(totalTime / 3600);
                let m = parseInt((totalTime % 3600) / 60);
                let s = ((totalTime % 3600) % 60);
                return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`
            }
            let closeTimeDown = () => {
                clearInterval(timerInterval);
                return 7200 - timers.value;
            }
            return{
                closeTimeDown,
                timeDown,
                timers
            }
        }
    }
</script>

<style scoped>

</style>
